<template>
  <div id="app">
    <router-view></router-view>
    <ImageDialog ref="imageDialog" :max='maxChooseImage'></ImageDialog>
    <SkuDialog ref="skuDialog" ></SkuDialog>
  </div>
</template>

<script>
import ImageDialog from './components/image/image-dialog';
import SkuDialog from './components/skus/sku-dialog';
export default {
  components: {ImageDialog,SkuDialog},
  name: 'app',
  data() {
    return {
      maxChooseImage: 9
    }
  },
  // 依赖注入
  provide: function () {
      return {
        app: this
      }
  },
  methods:{
    // 选择图片
    chooseImage(callback, max = 9) {
      this.maxChooseImage = max
      // 调用子组件方法
      this.$refs.imageDialog.show(callback)
    },
    // 选择规格
    chooseSkus(callback) {
      this.$refs.skuDialog.show(callback)
    }
  }
}
</script>
<style lang="less">
::-webkit-scrollbar-track
{
  background: rgba(0,0,0,.1);
  border-radius: 0;
}

::-webkit-scrollbar
{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb
{
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,.25);
    transition: color .2s ease;
}

</style>
